<template>
  <div class="auth-container">
    <h1 class="auth-title">景点推荐软件管理系统</h1>
    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
      <Login @switch-to-register="switchToRegister" @login-success="handleLoginSuccess" />

      <!-- 管理员不需要注册账号 -->
      <!-- <el-tab-pane label="登录" name="login">
        <Login @switch-to-register="switchToRegister" @login-success="handleLoginSuccess" />
      </el-tab-pane> -->
      <!-- <el-tab-pane label="注册" name="register">
        <Register @switch-to-login="switchToLogin" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import Login from './Login.vue'
import Register from './Register.vue'

export default {
  name: 'AuthPage',
  components: {
    Login,
    Register
  },
  data() {
    return {
      activeTab: 'login'
    }
  },
  methods: {
    handleTabClick(tab) {
      this.activeTab = tab.name
    },
    switchToRegister() {
      this.activeTab = 'register'
    },
    switchToLogin() {
      this.activeTab = 'login'
    },
    handleLoginSuccess(status) {
      this.$parent.updateLoginStatus(status)
    }
  }
}
</script>

<style scoped>
.auth-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
</style>